<template>
  <div class="app">
    <p class="title">{{ title }}</p>
    <div class="activity-tab">
      <div
        :class="['activity-tab__item', { active: curTab === k }]"
        v-for="(v, k) in tabList"
        :key="k"
      >
        {{ v }}
      </div>
    </div>
    -------------------------------------------------------
    <i class="iconfont icon-jiantouyou"></i>
    <img src="./../../assets/images/icon-key.png" alt="">
    <div class="bg"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello World!",
      tabList: [
        "每日任务",
        "幸运大转盘",
        "周榜专区",
        "总榜专区",
        "每日任务",
        "幸运大转盘",
        "周榜专区",
        "总榜专区",
      ],
      curTab: 1,
    };
  },
};
</script>

<style lang="scss" scoped>
.app {
  height: 100vh;
  width: $width;
  background-color: #f8f8f8;
}

.activity-tab {
  display: flex;
  overflow: auto;
}

.activity-tab__item {
  // width: 160px;
  height: 60px;
  margin-left: 24px;
  padding: 0 28px;
  border-radius: 30px;
  white-space: nowrap;
  text-align: center;
  line-height: 60px;
  background: #fff;

  &.active {
    color: #fff;
    background: linear-gradient(179deg, rgba(246, 154, 82, 0) 0%, #ff6142 100%);
  }
}

.title {
  // transform: rotate(45deg);
}

.bg {
  width: 100px;
  height: 100px;
  background-image: inline("icon-key.png");
  background-size: cover;
}
</style>
